<!-- 列表选择器示例 -->
<script setup lang="ts">
import selectConfig from './config/select'

interface IUser {
    id: number
    username: string
    nickname: string
    mobile: string
    genderLabel: string
    avatar: string
    email: string | null
    status: number
    deptName: string
    roleNames: string
    createdAt: string
}
const selectedUser = ref<IUser>()
function handleConfirm(data: IUser[]) {
    selectedUser.value = data[0]
}
const text = computed(() => {
    return selectedUser.value
        ? `${selectedUser.value.username} - ${selectedUser.value.genderLabel} - ${selectedUser.value.deptName}`
        : ''
})
</script>

<template>
    <div class="app-container">
        <el-link
            href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/table-select/index.vue"
            type="primary"
            target="_blank"
            class="mb-10"
        >
            示例源码 请点击>>>>
        </el-link>
        <table-select :text="text" :select-config="selectConfig" @confirm-click="handleConfirm">
            <template #status="scope">
                <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
                    {{ scope.row[scope.prop] == 1 ? '启用' : '禁用' }}
                </el-tag>
            </template>
        </table-select>
    </div>
</template>
